<template>
    <div>
        <input v-model="message" type="text">
        <div ref="div">{{message}}</div>
        <button @click="change">change</button>
    </div>
</template>

<script setup lang="ts">
// nextTick 使用
import { ref, nextTick } from 'vue';
const message = ref<string>('滴滴')
const div = ref<HTMLElement>()

const change = async () => {
    message.value = '滴滴答答'
    // console.log(div.value?.innerText);     // 页面显示变了，打印出来的值没变
    // 需要使用nextTick
    await nextTick()                        // 先执行3个队列（watch的第三个参数的 flush的三个值，拿到dom之后再去执行nexttick）nextTick 永远返回一个Promise，
    console.log(div.value?.innerText);      // 这时打印出来的值变了
    
}
</script>

<style scoped>

</style>